﻿@import url("variables.less");

/* General */
h2.list-section-title {
    text-align: center;
    .font-size(20);
}
.product-add-loading{
    display: none;
    width: 64px;
    margin: auto;
}
#main .container-fluid {
    max-width: 1800px;
    margin: auto;
}
/* Home Page */
.home-background {
    background: #fff;
    height: 350px;
    position: relative;
    z-index: 0;
    margin-top: -67px;
    left: 0;
    box-shadow: @trans-black-half 0 2px 5px;
    overflow: hidden;
    width: 100%;
}

.home-slide .btn-danger {
    width: 24%;
    position:absolute;
    left: 0;
    right:0;
    margin: auto;
    .font-size(18);
    text-transform:uppercase;
    margin-top:-7.5%;
}

.home-links {
    position: relative;
    background: @trans-light-grey-half;
    margin-top: -40px;
    height: 40px;
    margin-bottom: 140px;
    .home-link {
        padding-left: 1px;
        padding-right: 1px;
        .home-link-content {
            background: @trans-light-grey-half;
            height:160px;
            overflow: hidden;
            box-shadow: @trans-black-half 0 2px 5px;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            h3 {
                margin: 0;
                .font-size(24);
                line-height: 40px;
                height: 40px;
                color: #fff;
                text-align: center;
                text-transform: uppercase;
            }
            .home-link-icon {
                width: 45px;
                height: 45px;
                text-align: center;
                position: absolute;
                top: 0;
                bottom: 0;
                margin: auto;
                left: 15px;
                padding-top: 20px;
            }
            .home-link-text {
                margin-left: 65px;
                color: @text-color;
                position: relative;
                padding: 0 10px;
                tr{
                    height: 120px;
                    .font-size(16);
                }
            }
        }
    }

}

.home-products {
    margin: 0 5%;
}

/* Blog Page */
.blog-side {
    padding: 25px;
    margin-left: 10px;
    margin-top: 25px;
    border: 1px solid #ddd;
    border-radius: 5px;
    ul {
        padding-left: 20px;
    }
    .block-popular-blogtags{
        ul {
            padding-left: 0;
            li {
                list-style:none;
            }
        }
    }
}
.blog-page {
    h1 {
        .font-size(30);
        margin-bottom: 0;
    }
    &.blog-post-page h1 {
        .font-size(24);
    }
    .blog-title {
        .font-size(20);
        color: @red;
        margin-bottom: 10px;
    }
    .page-picture {
        position: relative;
        margin-bottom: 10px;
        img {
            max-width: 100%;
        }
    }
    .blog-date, .post-date{
        color: @medium-grey;
        .font-size(12);
    }
    .post-date{
        margin-bottom: 10px;
    }
    .blogposts .post{
        margin-bottom: 25px;
    }
    .link-rss {
        float: right;
        margin-top: 20px;
    }
    .new-comment {
        margin-top: 25px;
    }
    .blog-post-add-comment-button{
        padding: 5px 15px;
        margin-top: 10px;
        border-radius: 5px;
    }
    .comment-list {
        margin-top: 20px;
        h4.title {
            border-bottom: 1px solid #ddd;
            padding-bottom: 5px;
        }
        .comment-time{
            color: @medium-grey;
            .font-size(12);
        }
        .username {
            .font-size(16);
            color:@menugreen;
        }
        .comment-body {
            padding: 10px 0;
        }
        .blog-comment{
            border-bottom: 1px solid #ddd;
        }
    }
}

/* Search Page */
.container-fluid .search-container {
    margin: 0 10%;
    max-width: 1450px;
}

.search-filter-toggle-bar{
    display: none;
    background: @lighter-grey;
    border-radius: 5px;
    padding: 8px 15px;
    margin-bottom: 15px;
    .font-size(12);
    .search-filter-toggle{
        float: right;
    }
}
.breadcrumb {
    background: @lighter-grey;
    padding: 5px 15px;
    li.current{
        font-weight: bold;
        color: @red;
        a{
            color: @red;
        }
    }
    a{
        color: @text-color;
        &:hover{
            color: @red;
        }
    }
}
.breadcrumb>li+li:before{
    content: ">";
    color: @medium-grey;
}
.search-filter {
    .search-field {
        margin-bottom: 15px;
        .search-submit{
            cursor: pointer;
            &:hover, &:active{
                background: @red;
                color: #fff;
            }
        }
    }
    .filter-section {
        border: 1px solid @lighter-grey;
        margin-bottom: 15px;
        border-radius: 5px;
        overflow: hidden;
        .filter-section-title {
            .font-size(16);
            margin: 0;
            background: @trans-light-grey-half;
            padding: 5px 25px;
            text-align: center;
        }
        .filter-section-body {
            padding: 25px;
        }
        .price-slider-text {
            text-align: center;
        }
        .price-slider-wrapper {
            padding: 0 8px;
            margin-top: 10px;
        }
    }
    .parents-category-item {
        background: @lighter-grey;
        border-radius: 5px;
        position: relative;
        margin-bottom: 10px;
        a {
            display: block;
            .box-sizing(border-box);
            padding: 5px 15px;
            color: @text-color;
            &:hover, &:active {
                color: @red;
            }
        }
        .remove-category {
            position: absolute;
            right: 5px;
            top: 5px;
            padding: 3px;
            z-index: 1;
            cursor: pointer;
            &:hover,&:active {
                color: @red;
            }
        }
        .joiner {
            position: absolute;
            border-bottom: 1px solid #ccc;
            border-left: 1px solid #ccc;
            width: 8px;
            height: 20px;
            top: -4px;
            left: -12px;
        }
        &.parent-1 {
            margin-left: 15px;
        }
        &.parent-2 {
            margin-left: 30px;
        }
        &.parent-3 {
            margin-left: 45px;
        }
    }
    .available-categories {
        h4 {
            color: @text-color;
            margin-top: 15px;
            padding-bottom: 5px;
            border-bottom: 1px solid @lighter-grey
        }
        .available-category a {
            color: @text-color;
            display: block;
            margin-bottom: 10px;
            .font-size(16);
            &:hover,&:active {
                color: @red;
            }
        }
    }
}
.search-results-wrapper{
    .pager{
        background:@lighter-grey;
        a, span{
            display: inline-block;
            color: @red;
            padding: 5px;
            border-radius: 3px;
            &.current-page{
                color: @text-color;
                font-weight: bold;
            }
        }
    }

}
/* Product Box */
.product-box {
    margin-bottom: 15px;
    .free-shipping-icon{
        background: url("/Content/images/free-shipping-icon-green.png") no-repeat;
        width: 40px;
        height: 40px;
        position: absolute;
        right: 8px;
        bottom: 20px;
        span, .fa{
            display: none;
        }
    }
    .product-wrapper {
        border: 1px solid @lighter-grey;
        border-radius: 5px;
        overflow: hidden;
        position: relative;
        .quick-view-button {
            position: absolute;
            right: 0;
            left: 0;
            margin: auto;
            width: 65%;
            background: @red;
            color: #fff;
            .font-size(14);
            padding: 5px 10px;
            margin-top: -100px;
            display: none;
        }
        a{
            color: @text-color;
            &:hover, &:active {
                color: @red;
            }
        }
        .image {
            width: 100%;
            height: 0;
            padding-bottom: 100%;
            overflow: hidden;
            position: relative;
            .image-wrapper{
                position: absolute;
            }
            .image-wrapper, img {
                display: block;
                height: 100%;
                width: 100%;
            }
        }
        .product-title{
            padding: 5px 0;
            text-align: center;
            background: @lighter-grey;
            background: @trans-black-slight;
            table{
                width: 100%;
                tr, td{
                    vertical-align: middle;
                    height: 36px;
                }
            }
            h4 {
                padding: 0 15px;
                position: relative;
                text-align: center;
                margin-top:5px;
                margin: 0;
                .font-size(13);
                font-weight: bold;
                line-height: 18px;
                overflow: hidden;
                max-height: 36px;
                -o-text-overflow:ellipsis;
                -ms-text-overflow:ellipsis;
                text-overflow:ellipsis;
            }
        }
        
        .info {
            height: 75px;
            padding: 5px 15px 0 15px;
            text-align: center;
            
        }
        &:hover {
            .quick-view-button {
                display: block;
            }
        }
    }
    .stars-info{
        .font-size(15);
        .stars {
            width: 85px;
            margin: auto;
            display: block;
            float: none;
        }
        .stars-top{
            max-width: 85px;
        }
    }
    .normal-price {
        color: @light-grey;
        .font-size(11);
        &.member-price{
            color: @menugreen;
        }
    }
    
    .sold-out-bg {
        position: absolute;
        height: 100%;
        width: 100%;
        background: rgba(0,0,0,0.03);
        .sold-out-display {
            background: @red;
            color: #fff;
            position: absolute;
            left: 0;
            right: 0;
            width: 60%;
            margin: auto;
            bottom: 20px;
            .font-size(14);
            padding: 5px;
        }
    }
}

.quick-view-modal{
    min-width: 290px!important;
    .modal-header, .modal-footer {
        border: 0;
    }
    .modal-body .image {
        margin-bottom: 20px;
    }
    
    .prices-summary {
        padding-right:45px;
        span {
            .font-size(11);
            color: @light-grey;
            margin-right: 10px;
            vertical-align: middle;
            &.current{
                .font-size(16);
                color: @text-color;
                font-weight: bold;
            }
        }
    }
    .shipping-message{
        color:@menugreen;
        margin-bottom: 10px;
        font-weight: bold;
    }
    .stars-info{
        .font-size(15);
        .stars {
            width: 85px;
            margin: auto;
            display: block;
            float: none;
        }
        .stars-top{
            max-width: 85px;
        }
    }
    .highlight-price{
        .font-size(15);
    }
    .image{
        overflow: hidden;
        border-radius: 5px;
        border: 1px solid @light-grey;
    }
    h4.product-box-title {
        margin: 0;
        color: @red;
        line-height: 25px;
        a{
            color: @red;
        }
    }
    .product-header .stars-info .stars {
        margin-left: 0;
    }
    .product-box-price{
        border: 1px solid @lighter-grey;
        border-radius: 5px;
        padding: 15px;
        margin: 10px 0;
        .price-title{
            border-radius: 5px;
            background: @lighter-grey;
            text-align: center;
            padding: 3px;
            margin-bottom: 10px;
        }
        table {
            width: 100%;
            margin-bottom: 10px;
            border: 1px solid @lighter-grey;
        }
        td{
            text-align: center;
            border-bottom: 1px solid @lighter-grey;
            &.current{
                border: 1px solid @red;
                color: @red;
            }
            div{
                
            }
        }
    }
    .product-header{
        border-bottom: 1px solid @lighter-grey;
        margin-bottom: 5px;
    }
    .product-info-wrapper {
        padding: 15px;
        .info{
            padding-left: 15px;
            h3{
                margin: 0;
                .font-size(18);
                a{
                    color: @red;
                }
            }
        }
    }
    .add-to-cart {
        margin-bottom: 10px;
    }
}

.category-box {
    margin-bottom: 20px;
    .category-box-container {
        border: 1px solid @lighter-grey;
        border-radius: 5px;
        .image {
            width: 100%;
            max-width: 100%;
        }
        .caption {
            text-align: center;
            .font-size(14);
            padding: 10px;
            a{
                color: @text-color;
                &:hover, &:active {
                    color: @red;
                }
            }
            
        }
    }
}

.categories-page h2.list-section-title {
    display: none;
}

.featured-product-box {
    margin-bottom: 25px;
    .product-wrapper {
        padding: 0;
        border: 1px solid @lighter-grey;
        border-radius: 5px;
        overflow: hidden;
        .product-image{
            overflow: hidden;
            border-radius: 5px;
            border: 1px solid @lighter-grey;
            img {
                width: 100%;
            }
        }
        .page-title {
            border-bottom: 0;
            margin: 0;
            padding: 0 25px;
            .font-size(16);
            font-weight: bold;
            line-height: 35px;
            background: @trans-lighter-grey;
        }
        .product-header{
            border-bottom: 1px solid @lighter-grey;
            margin-bottom: 5px;
        }
        .product-info-wrapper {
            padding: 15px;
            .info{
                padding-left: 15px;
                h3{
                    margin: 0;
                    .font-size(18);
                    a{
                        color: @red;
                    }
                }
            }
            
        }
        .shipping-message{
            color:@menugreen;
            margin-bottom: 10px;
            font-weight: bold;
        }
        .prices-summary {
            span {
                .font-size(11);
                color: @light-grey;
                margin-right: 10px;
                vertical-align: middle;
                &.current{
                    .font-size(16);
                    color: @text-color;
                    font-weight: bold;
                }
            }
        }
    }
    .tier-prices{
        margin: 15px 0;
        table {
            width: 100%;
            margin-bottom: 10px;
        }
        tr {
            &:first-child {
                td:first-child div{
                    border-top-left-radius: 5px;
                }
                td:last-child div{
                    border-top-right-radius: 5px;
                }
            }
            &:last-child {
                td:first-child div{
                    border-bottom-left-radius: 5px;
                }
                td:last-child div{
                    border-bottom-right-radius: 5px;
                }
            }
        }
        td{
            text-align: center;
            div{
                border: 1px solid @lighter-grey;
                border: 1px solid @red;
            }
            &.current div{
                color: @red;
            }
            
        }
    }
}


.product-container-carousel.slick-slider, .category-navigation.slick-slider {
    margin-bottom: 55px;
    a, .slick-slide{
        outline:none;
    }
    .slick-dots {
        position: absolute;
        width: 100%;
        padding: 0 20px;
        text-align: center;
        li {
            display: inline-block;
            list-style: none;
            margin: 5px;
            text-indent:-9999px;
            height:10px;
            width: 10px;
            overflow: hidden;
            background: transparent;
            border: 1px solid @light-grey;
            border-radius: 10px;
            &.slick-active {
                background: @grey;
                border: 1px solid @grey;
            }
        }
    }
    .slick-prev, .slick-next {
        position: absolute;
        font-size: 20px;
        z-index: 10;
        border: 1px solid @light-grey;
        line-height: 40px;
        width: 40px;
        height: 40px;
        text-align: center;
        border-radius: 20px;
        top: 50%;
        margin-top: -36px;
        cursor: pointer;
        &.slick-disabled {
            color: @lighter-grey;
            cursor: default;
            border: 1px solid @lighter-grey;
        }
    }
    .slick-prev {
        left: -50px;
    }
    .slick-next{
        right: -50px;
    }
}
.prices-summary{
    margin-bottom: 10px;
}
.free-shipping-product-icon{
    background: url("/Content/images/free-shipping-icon-green.png") no-repeat;
    width: 40px;
    height: 40px;
    position: absolute;
    right: 8px;
}

/*.product-container-carousel-wrapper {
    .prev, .next {
        position: absolute;
        .font-size(20);
        text-align: center;
        width: 40px;
        height: 40px;
        line-height: 40px;
        color: @grey;
        border: 1px solid @light-grey;
        &.disabled {
            color: @lighter-grey;
            border: 1px solid @lighter-grey;
        }
    }
    .product-container-carousel {
        overflow: hidden;
        margin-bottom: 20px;
        position:relative;
        .product-box, .category-box {
            border-top: 1px solid @lighter-grey;
            position: absolute;
        }
        .product-box{
            margin-top: -1px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
    }
    &.contract {
        padding: 0 65px;
    }
}
.product-container-carousel-bg {
    position: absolute;
    border-top: 1px solid @lighter-grey;
    border-bottom: 1px solid @lighter-grey;
    background: @trans-light-grey-half;
    width: 100%;
    left: 0;
}*/

/* Recently Viewed */
.recent-viewed-products {
    position: relative;
    padding: 15px 0;
    background: @trans-lighter-grey-half;
    h2{
        margin-top: 0;
    }
    .product-container-carousel-bg{
        background: transparent;
        border: 0;
    }
    .slick-slide{
        outline: none;
    }
    a {
        display: block;
        height: 100%;
        width: 100%;
        border: 1px solid @lighter-grey;
        img {
            width: 100%;
        }
    }
    .slick-dots {
        margin-top: 15px;
        width: 100%;
        padding: 0;
        text-align: center;
        li {
            display: inline-block;
            list-style: none;
            margin: 5px;
            text-indent:-9999px;
            height:10px;
            width: 10px;
            overflow: hidden;
            background: transparent;
            border: 1px solid @light-grey;
            border-radius: 10px;
            &.slick-active {
                background: @grey;
                border: 1px solid @grey;
            }
        }
    }
    .slick-prev, .slick-next {
        display: none!important;
    }
}

/* Product Page */
.product-image-wrapper {
    margin-bottom: 20px;
    .product-images .carousel-inner {
        border: 1px solid @lighter-grey;
        border-radius: 5px;
        overflow: hidden;
    }
    .item {
        border-radius: 5px;
        overflow: hidden;
    }
    .carousel-indicators{
        position: relative;
        bottom: auto;
        left: auto;
        margin: 0;
        margin-top: 10px;
        text-align: left;
        width: 100%;
        .thumb {
            display: inline-block;
            width: auto;
            height: auto;
            position: relative;
            overflow: hidden;
            margin: 0;
            .carousel-thumb {
                position: relative;
                margin: 5px;
                border-radius: 5px;
                overflow: hidden;
                border: 1px solid @lighter-grey;
            }
            &.active {
                .carousel-thumb {
                    border: 1px solid @red;
                }
            }
            &.current .carousel-thumb{
                border: 1px solid @red;
            }
        }
    }
    .carousel-pictures-wrapper {
        .slick-slide, a {
            outline: none;
            cursor: pointer;
        }
        .slick-prev, .slick-next{
            display: none!important;
        }
    }
    .carousel-thumbs-wrapper{
        margin: 0 30px;
        &.thumbs-inactive {
            margin: 0;
            .slick-prev, .slick-next{
                display: none!important;
            }
        }
    }
    .product-picture-thumbs {
        .slick-slide {
            overflow: hidden;
            outline: none;
            cursor: pointer;
            img {
                width: 100%;
            }
        }
        .slick-dots{
            display: none;
        }
        .slick-prev, .slick-next{
            position: absolute;
            .font-size(20);
            height: 94%;
            line-height: 100%;
            top:3%;
            border: 1px solid @lighter-grey;
            width: 25px;
            text-align: center;
            border-radius: 5px;
            padding: 5px 0;
            &.slick-disabled{
                color: @lighter-grey;
                border: 1px solid @trans-light-grey;
            }
            .fa {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                height: 20px;
            }
        }
        .slick-prev{
            left: -30px;
        }
        .slick-next{
            right: -30px;
        }
        /*.slick-prev, .slick-next{
            color:transparent;
            border: 0;
            width: 20px;
            height: 20px;
            .font-size(14);
            font-weight: bold;
            line-height: 14px;
            border-radius: 15px;
            overflow: hidden;
            position: absolute;
            margin-top: -10px;
            top: 50%;
            outline: none;
            background: @velvet;
            background: @trans-velvet;
            
        }
        .slick-prev{
            left: -25px;
        }
        .slick-next{
            right: -25px;
        }
        .slick-prev:before
        {
            content: '\003c';
            color: #fff
        }
        .slick-next:before
        {
            content: '\003e';
            color:#fff;
        }*/
    }
}
.container-fluid .product-page-container {
    margin: 0 10%;
    max-width: 1450px;
}
.product-page-info {
    border: 1px solid @lighter-grey;
    border-radius: 5px;
    padding: 25px;
    .product-information{
        position: relative;
        .free-shipping-product-icon{
            right:0;
        }
    }
    h1 {
        color: @red;
        .font-size(20);
        margin: 0;
    }
    .ageclass{
        width: 50px;
        height: 68px;
        float: right;
        background: url(/Content/images/ageclass.png) no-repeat;
        .font-size(10);
        text-align: center;
        line-height: 68px;
        color: #fff;
        font-weight: bold;
    }
    .prices-summary {
        span {
            .font-size(11);
            color: @light-grey;
            margin-right: 10px;
            vertical-align: middle;
            &.current{
                .font-size(16);
                color: @text-color;
                font-weight: bold;
            }
        }
    }
    .shipping-message{
        color:@menugreen;
        margin-bottom: 10px;
        font-weight: bold;
    }
    .quantity-container {
        margin-top:10px;
        max-width: 700px;
        .qty-label{
            padding-top: 0.4em;
        }
    }
    .quantity-label {
        line-height: 34px;
    }
    .qty-input {
        margin-bottom: 10px;
    }
}
.product-page-info-header{
    border-bottom: 1px solid @lighter-grey;
}
.product-page-details {
    margin: 25px 0;
    .nav-tabs.nav-justified>li>a{
        border: 1px solid @light-grey;
        padding: 20px 15px;
        background: @trans-light-grey;
        color: @text-color;
        font-weight: bold;
    }
    .nav-tabs.nav-justified>.active>a{
        border: 1px solid @light-grey;
        border-bottom: 1px solid transparent;
        background: @trans-lighter-grey-more;
        color: @red;
    }
    .tab-content {
        border: 1px solid @light-grey;
        border-top: 0;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        background: @trans-lighter-grey;
        .tab-content-title{
            display: none;
        }
        .tab-pane {
            padding: 25px;
        }
        p {
            margin: 0.5em 0;
        }
    }
}
.tier-pricing-container .tier-pricing-table {
    position: relative;
    .price-tier{
        line-height: 20px;
        width: 50%;
        float: left;
        border: 1px solid @light-grey;
        border-left: 0;
        .tier-name{
            border-bottom: 1px solid @light-grey;
        }
        &:first-child{
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            border-left: 1px solid @light-grey;
            
        }
        &:last-child{
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }
        &.regular{
            border-color: @red;
            color: @red;
            .font-size(16);
            line-height: 20px;
            font-weight:bold;
            .tier-name{
                border-color: red;
            }
        }
    }
    &.member-tier{
        .price-tier{
            &.regular{
                border-color: @light-grey;
                color: @text-color;
                .tier-name{
                    border-color: @lighter-grey;
                }
            }
            &.member{
                border-color: @red;
                color: @red;
                .tier-name{
                    border-color: @red;
                }
                border-left: 1px solid @red;
            }
        }
    }
}
.stock-info{
    .font-size(14);
    margin-top: 5px;
    .in-stock{
        color:@light-velvet;
    }
    .out-of-stock{
        color:@light-velvet;
    }
}
.out-of-stock-display{
    clear: both;
    background: @light-velvet;
    color: #fff;
    padding: 10px;
    .font-size(20);
    font-weight: bold;
    text-align: center;
}
.addthis_toolbox{
    margin-top: 15px;
    span {
        margin: 0 5px;
        border-radius: 5px;
        overflow: hidden;
    }
}
/* Reviews */
.product-reviews-overview{
    .product-review-item{
        margin-bottom: 20px;
    }
    .review-title{
        margin-bottom: 0;
    }
}
.star-rating {
    font-size: 0;
    white-space: nowrap;
    display: inline-block;
    width: 125px;
    height: 25px;
    overflow: hidden;
    position: relative;
    background: url('');
    background-size: contain;
    i{
        opacity: 0;
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 20%;
        z-index: 1;
        background: url('');
        background-size: contain;
    }
    input{
        cursor: pointer;
        -moz-appearance: none;
        -webkit-appearance: none;
        opacity: 0;
        display: inline-block;
        width: 20%;
        height: 100%;
        margin: 0;
        padding: 0;
        z-index: 2;
        position: relative;
            &:hover + i, &:checked + i{
                opacity: 1;
        }
    }
    i ~ i{
        width:40%;
    }
    i ~ i ~ i{
        width:60%;
    }
    i ~ i ~ i ~ i{
        width:80%;
    }
    i ~ i ~ i ~ i ~ i{
        width:100%;
    }
}
.stars-info{
    .font-size(20);
    position: relative;
    
    .fa-star {
        color: @yellow;
    }
    .fa-star-o {
        color:@lighter-grey;
    }
    .stars-top{
        position: absolute;
        left: 0;
        top: 0;
        overflow:hidden;
        white-space: nowrap;
    }
    .stars {
        position: relative;
        width: 115px;
        float: left;
    }
    .stars-count{
        .font-size(14);
        line-height: 20px;
        float: left;
        margin-top: 5px;
        margin-left: 5px;
    }
}

/* Shopping Cart */
.shopping-cart {
    .cart-order-summary .cart-store-items, .cart-order-total{
        border: 1px solid @grey;
        border-radius: 5px;
        overflow: hidden;
        margin-bottom: 25px;
        table {
            width: 100%;
            th{
                padding: 10px 15px;
                background: @lighter-grey;
                font-weight: normal;
                border-bottom: 1px solid @grey;
                text-align: center;
            }
            td{
                padding: 10px 15px;
                text-align: center;
            }
            tr {
                border-top: 1px solid @grey;
                &:first-child{
                    border-top: 0;
                }
            }
        }
    }
    .cart-order-total{
        margin-bottom: 0;
    }
    .product-mobile-title, .product-mobile-attributes, .product-mobile-label{
        display: none;
    }
    .product-quantity-editor{
        max-width: 140px;
        margin: auto;
        input {
            text-align: center;
            z-index: 1;
        }
        .input-group-addon{
            width: 35px;
            text-align: center;
            cursor: pointer;
            background: #fff;
            color: @grey;
            &:hover, &:active {
                background: @red;
                color: #fff;
            }
            &.disabled{
                background: @lighter-grey;
                cursor: not-allowed;
                &:hover, &:active {
                    background: @lighter-grey;
                    color: @grey;
                }
            }
        }
    }
    .cart-item-update-button, .cart-item-loading{
        display: none;
    }
    .cart-item-update-button{
        margin-top: 10px;
    }
    .cart-order-total table td {
        text-align: left;
        padding-left: 50px;
    }
    .checkout-attributes input, .checkout-attributes textarea {
        margin-bottom: 10px;
    }
    .checkout-attributes label.text-prompt {
        text-transform:capitalize;
    }
    .cart-delivery {
        background: url(/Content/images/checkout-delivery-bg.jpg) bottom center no-repeat #000;
        background-size:cover;
        color: #fff;
        padding: 35px;
        border-radius: 5px;
        .image {
            width: 85px;
            height: 65px;
            margin: auto;
            margin-bottom: 15px;
            background: url(/Content/images/white-cloud-logo.png) no-repeat;
        }
        .content{
            .font-size(16);
        }
    }
    .checkout-buttons{
        div {
            margin-bottom: 15px;
        }
    }
}

/* Contact Us */
.contact-us {
    .spotshub-mobile-locations{
        display: none;
        img {
            width:100%;
        }
    }
    .contact-us-info-container {
        margin-bottom: 20px;
    }
    .contact-phone-icon {
        width: 80px;
        height: 80px;
        float: left;
        background: url(/Content/images/contact-01.png) 20px 0 no-repeat;
    }
    .contact-hours-icon {
        width: 80px;
        height: 80px;
        float: left;
        background: url(/Content/images/contact-02.png) no-repeat;
    }
    .contact-form-icon {
        width: 80px;
        height: 80px;
        float: left;
        background: url(/Content/images/contact-03.png) no-repeat;
    }
    .contact-form-wrapper, .contact-hours-container, .contact-phone-wrapper {
        margin-left: 100px;
    }
    .contact-phone-test {
        display:none;
    }
    .input-group
    {
        margin-bottom: 15px;
        input.form-control {
            height: 42px;
        }
    }   
    .input-group-addon {
        padding: 2px;
        .contact-us-icon1 {
            background: url(/Content/Images/contactus-01.png) 3px 1px no-repeat;
            width: 36px;
            height: 36px;
            display: block;
        }
        .contact-us-icon2 {
            background: url(/Content/Images/contactus-02.png) 7px 2px no-repeat;
            width: 36px;
            height: 36px;
            display: block;
        }
        .contact-us-icon3 {
            background: url(/Content/Images/contactus-03.png) 1px 6px no-repeat;
            width: 36px;
            height: 36px;
            display: block;
        }
    }
    .map-wrapper {
        margin-bottom: 30px;
    }
}

/* Checkout Page General */
.checkout-bg1 {
    background: url(/Content/Images/footer-badge-bg.png) 100% no-repeat @light-grey;
    background-size: cover;
    height: 400px;
}
.checkout-bg2 {
    background: url(/Content/Images/dusk.jpg) center bottom no-repeat @light-grey;
    background-size: cover;
}
.checkout-page {
    position: relative;
}
.checkout-page-wrapper {
    margin-bottom: 35px;
    margin-top: -400px;
    .btn-normal {
        margin-bottom: 5px;
    }
    .checkout-steps{
        margin: 25px;
        position: relative;
        height: 150px;
        .checkout-step {
            position:absolute;
            width: 120px;
            height: 150px;
            border-radius: 5px;
            background: @trans-white-less;
            color: #fff;
            .font-size(16);
            .box-sizing(border-box);
            text-transform: uppercase;
            padding: 15px;
            text-align: center;
            .icon {
                height: 100px;
            }
            &.checkout-step-first{
                left: 0;
                .icon img {
                    margin-top: 10px;
                }
            }
            &.checkout-step-second{
                left: 0;
                right: 0;
                margin: auto;
                
            }
            &.checkout-step-third{
                right: 0;
                .icon img {
                    margin-top: 15px;
                }
            }
        }
    }
    .checkout-onepage {
        background: @trans-white-less;
        border-radius: 5px;
        .box-sizing(border-box);
        padding: 25px;
        position: relative;
        h1.page-title {
            .font-size(24);
            line-height: 28px;
            color: #fff;
            margin-top: 0;
            padding-bottom: 5px;
            margin-bottom: 10px;
            border-bottom: 1px solid #fff;
            text-transform: uppercase;
        }
        .checkout-main-wrapper {
            min-height: 300px;
            .box-sizing(border-box);
            padding: 25px;
            padding-top: 40px;
            background: @grey;
            background: @trans-white;
            border-radius: 5px;
        }
        .checkout-main-content {
            overflow: hidden;
        }
        .checkout-loading {
            position: absolute;
            width: 106px;
            height: 125px;
            text-align: center;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            border-radius: 5px;
            padding: 20px;
            img {
                margin: auto;
                margin-bottom: 10px;
            }
        }
        h3 {
            margin-top: 0;
        }
    }
}

/* Checkout Addresses */
.checkout-address-section {
    display: none;
    &.active{
        display: block;
    }
}
.checkout-address-continue-button, .checkout-payment-continue-button {
    .font-size(18);
    height: 46px;
    padding: 10px;
    margin-top: 100px;
}
.date-picker-wrapper{
    overflow: hidden;
    height: 0;
    margin-top: 20px;
    #shipmentDataPickerId {
        background: #fff;
    }
    .input-group {
        cursor: pointer;
    }
}
.schedule-date-selection td{
    vertical-align: top;
    label{
        padding-left: 10px;
    }
    .arrival-estimate {
        color: @red;
    }
}

.checkout-address-form-hidden {
    display: none;
}
.render-address-form{
    .address-types{
        margin: 5px 0;
    }
    label{
        margin-bottom: 2px;
        margin-top: 5px;
    }
    
}
.checkout-address-form .opc-buttons {
    margin-top: 10px;
}
.checkout-address-content .address-empty {
    margin-bottom: 10px;
}
.checkout-address-savedshipping {
    padding: 15px;
    background: @lighter-grey;
    h4 {
        margin-top: 0;
    }
}
.checkout-address-display{
    .checkout-address-content, .checkout-address-option{
        margin-bottom: 25px;
    }
}
.checkout-available-addresses .address-item {
    padding: 15px;
    height: 210px;
    overflow:hidden;
    .address-render-content {
        max-height: 160px;
        overflow: hidden;
        margin-bottom: 5px;
    }
}
/* Checkout Payment */
.payment-form-load {
    iframe {
        border: 0;
    }
}
.checkout-paymentinfo {
    .credit-card-section table {
        width: 100%;
        .font-size(12);
        margin-bottom: 15px;
        th div{
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f4f4f4+0,e2e2e2+100 */
            background: rgb(244,244,244); /* Old browsers */
            /* IE9 SVG, needs conditional override of 'filter' to 'none' */
            background: url();
            background: -moz-linear-gradient(top,  rgba(244,244,244,1) 0, rgba(226,226,226,1) 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0,rgba(244,244,244,1)), color-stop(100%,rgba(226,226,226,1))); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top,  rgba(244,244,244,1) 0,rgba(226,226,226,1) 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top,  rgba(244,244,244,1) 0,rgba(226,226,226,1) 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top,  rgba(244,244,244,1) 0,rgba(226,226,226,1) 100%); /* IE10+ */
            background: linear-gradient(to bottom,  rgba(244,244,244,1) 0,rgba(226,226,226,1) 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#e2e2e2',GradientType=0 ); /* IE6-8 */
            color: @text-color;
            padding: 5px 10px;
            border: 1px solid @light-grey;
            border-left: 0;
        }
        th.card-select {
            width: 35px;
            div{
                border-left: 1px solid @light-grey;
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;
            }
        }
        th.card-expiry div{
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }
        td.card-select {
            text-align:center;
        }
        tr.credit-card {
            cursor: pointer;
            div {
                padding: 5px 10px;
                margin-top: 5px;
            }
            &.selected div, &:hover div, &:active div {
                /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cedce7+0,596a72+100;Grey+3D+%231 */
                background: rgb(206,220,231); /* Old browsers */
                /* IE9 SVG, needs conditional override of 'filter' to 'none' */
                background: url();
                background: -moz-linear-gradient(top,  rgba(206,220,231,1) 0, rgba(89,106,114,1) 100%); /* FF3.6+ */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0,rgba(206,220,231,1)), color-stop(100%,rgba(89,106,114,1))); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(top,  rgba(206,220,231,1) 0,rgba(89,106,114,1) 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top,  rgba(206,220,231,1) 0,rgba(89,106,114,1) 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(top,  rgba(206,220,231,1) 0,rgba(89,106,114,1) 100%); /* IE10+ */
                background: linear-gradient(to bottom,  rgba(206,220,231,1) 0,rgba(89,106,114,1) 100%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 ); /* IE6-8 */
                color: #fff;
            }
        }
    }
}

/* Checkout Confirm */
.checkout-confirm {
    .checkout-confirm-customer-info{
        margin-bottom: 30px;
    }
    .checkout-products .order-summary table {
        width: 100%;
        .font-size(12);
        margin-bottom: 15px;
        th div{
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f4f4f4+0,e2e2e2+100 */
            background: rgb(244,244,244); /* Old browsers */
            /* IE9 SVG, needs conditional override of 'filter' to 'none' */
            background: url();
            background: -moz-linear-gradient(top,  rgba(244,244,244,1) 0, rgba(226,226,226,1) 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0,rgba(244,244,244,1)), color-stop(100%,rgba(226,226,226,1))); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top,  rgba(244,244,244,1) 0,rgba(226,226,226,1) 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top,  rgba(244,244,244,1) 0,rgba(226,226,226,1) 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top,  rgba(244,244,244,1) 0,rgba(226,226,226,1) 100%); /* IE10+ */
            background: linear-gradient(to bottom,  rgba(244,244,244,1) 0,rgba(226,226,226,1) 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#e2e2e2',GradientType=0 ); /* IE6-8 */
            color: @text-color;
            padding: 5px 10px;
            border: 1px solid @light-grey;
            border-left: 0;
            height: 30px;
        }
        th.product-picture div {
            border-right: 0;
            border-left: 1px solid @light-grey;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
        }
        th.product-total div {
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
        }
        .product-total, .product-unit, .product-qty {
            min-width: 80px;
        }
        td.product-total, td.product-unit, td.product-qty {
            text-align: center;
        }
        tbody tr {
            border-bottom: 1px solid @light-grey;   
            td {
                padding: 15px;
            }
        }
    }
    .checkout-total .total-info {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f4f4f4+0,e2e2e2+100 */
        background: rgb(244,244,244); /* Old browsers */
        /* IE9 SVG, needs conditional override of 'filter' to 'none' */
        background: url();
        background: -moz-linear-gradient(top,  rgba(244,244,244,1) 0, rgba(226,226,226,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0,rgba(244,244,244,1)), color-stop(100%,rgba(226,226,226,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  rgba(244,244,244,1) 0,rgba(226,226,226,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  rgba(244,244,244,1) 0,rgba(226,226,226,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  rgba(244,244,244,1) 0,rgba(226,226,226,1) 100%); /* IE10+ */
        background: linear-gradient(to bottom,  rgba(244,244,244,1) 0,rgba(226,226,226,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#e2e2e2',GradientType=0 ); /* IE6-8 */
        color: @text-color;
        padding: 5px 10px;
        border: 1px solid @light-grey;
        border-radius: 5px;
        .font-size(12);
        margin-bottom: 25px;
        table {
            width: 100%;
            td {
                padding: 5px 10px;
            }
        }
    }
    
    .checkout-products {
        .product-mobile-label, .product-mobile-title, .product-mobile-attributes {
            display: none;
        }
    }

    .checkout-confirm-continue-button{
        .font-size(18);
        margin-top: 15px;
        height: 45px;
        border-radius: 5px;
    }
}
/* Checkout Complete */
.checkout-complete {
    h2 {
        margin-top: 0;
        .font-size(20);
    }
}

/** Media Query **/
@media @mobile {
    
}
@media @mobile-strict {

}
@media @phone {
    h1, .page-title {
        .font-size(20);
    }
    .product-box{
        .product-wrapper .info {
            padding: 10px;
        }
        .product-wrapper .caption h4 {
            padding: 0 10px;
            .font-size(12);
            line-height: 30px;
        }
        .btn-red{
            .font-size(14);
        }
    }
    
    h2.page-title {
        margin-bottom: 10px;
    }
    .breadcrumb{
        margin-bottom: 10px;
    }
    .featured-product-box {
        .product-wrapper {
            .product-info-wrapper .info{
                padding-left: 0;
            }
            h3 {
                .font-size(16);
            }
        }
    }
    .product-page-details {
        .nav-tabs{
            display: none;
        }
        .tab-content{
            border: 0;
            background: transparent;
            .tab-pane{
                display: block!important;
                padding: 15px;
                border: 1px solid @lighter-grey;
                margin-bottom: 20px;
                border-radius: 5px;
            }
            .tab-content-title{
                display: block;
                .font-size(16);
                margin-top: 0;
                border-bottom: 1px solid @lighter-grey;
            }
        } 
    }
    #map {
        display: none;
    }
    .contact-us .spotshub-mobile-locations{
        display: block;
    }
    .map-wrapper .address {
        position: relative;
        top: auto;
        right: auto;
    }
    .contact-us .contact-form-icon, .contact-us .contact-hours-icon, .contact-us .contact-phone-icon {
        background-size: cover;
        width: 40px;
        height: 40px;
        margin-top:10px;
    }
    .contact-us .contact-phone-icon{
        background-position: 0 0;
        width:31px;
        height:59px;
    }
    .contact-us .contact-form-wrapper, .contact-us .contact-hours-container, .contact-us .contact-phone-wrapper{
        margin-left: 60px;
    }
    .cart-store-item {
        border-top: 1px solid @grey;
    }
    .order-summary table {
        thead, th{
            display: none;
        }
        td{
            display: block;
            float:left;
            padding: 0;
            &.product-picture, &.product-unit,&.product-qty,&.product-total{
                width: 50%;
                .font-size(12);
            }
            &.product-picture img {
                border: 1px solid @lighter-grey;
            }
            &.product-unit,&.product-qty,&.product-total{
                padding: 5px;
                margin-top:0;
            }
            &.product-info{
                display: none;
            }
            &.product-mobile-title, &.product-mobile-attributes, &.product-remove{
                display: block;
                width: 100%;
                float: none;
                clear: both;
                padding-bottom: 0;
            }
            &.product-mobile-title h5{
                margin: 0;
                text-align: left;
            }
            &.product-remove{
                padding: 0;
                background: @lighter-grey;
                .cart-store-items-remove{
                    display: block;
                    padding: 5px;
                }
            }
            .product-mobile-label{
                display: block;
                font-weight: bold;
            }
            
        }
    }
    .checkout-page-wrapper .checkout-onepage{
        padding: 10px;
    }
    .checkout-page-wrapper .checkout-onepage h1.page-title{
        .font-size(20);
    }
    .checkout-page-wrapper .checkout-steps{
        margin-left: 0;
        margin-right: 0;
        .checkout-step{
            width: 30%;
            .font-size(14);
            font-weight: bold;
        }
        .checkout-step-second .icon{
            padding: 10px;
        }
        .icon {
            padding: 0;
            position:relative;
            max-width: 80px;
            margin: auto;
            img{
                width: 100%;

            }
        }
    }
    table.cart-total{
        width: 100%;
    }
    .cart-total-right.text-right {
        text-align: right;
    }
    .checkout-confirm .checkout-confirm-order-info .checkout-products .order-summary table tbody tr {
        padding: 10px 0;
        display: block;
        td{
            padding: 0;
            h5 {
                margin-bottom: 10px;
            }
        }
    }
    .date-picker-wrapper{
        label, .form-group {
            margin-bottom: 5px;
        }
    }
    .checkout-address-option {
        margin-bottom: 20px;
    }
    .credit-card-section{
        margin-bottom: 20px;
    }
    #creditcards {
        thead, th {
            display: none;
        }
        tr{
            display: block;
            background: @lighter-grey;
            margin-bottom: 10px;
            position: relative;
            padding-top: 5px;
            padding-bottom: 5px;
            td {
                display: block;
                float: left;
                div, div:hover{
                    background:transparent;
                    margin: 0;
                    padding: 1px 5px;
                }
                &.card-select{
                    display: block;
                    width:30px;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top:0;
                    input{
                        position: absolute;
                        top: 0;
                        bottom:0;
                        left: 0;
                        right: 0;
                        margin: auto;
                    }
                }
                &.card-type {
                    width: 15%;
                }
                &.card-number {
                    width:100%;
                    padding-left: 30px;
                }
                &.card-holder{
                    width:100%;
                    padding-left: 30px;
                }
                &.card-expiry{
                    width: 100%;
                    padding-left: 30px;
                }
                &.card-mobile-clear {
                    float:none;
                }
            }
            &.selected, &:hover {
                /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cedce7+0,596a72+100;Grey+3D+%231 */
                background: rgb(206,220,231); /* Old browsers */
                /* IE9 SVG, needs conditional override of 'filter' to 'none' */
                background: url();
                background: -moz-linear-gradient(top,  rgba(206,220,231,1) 0, rgba(89,106,114,1) 100%); /* FF3.6+ */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(0,rgba(206,220,231,1)), color-stop(100%,rgba(89,106,114,1))); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(top,  rgba(206,220,231,1) 0,rgba(89,106,114,1) 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(top,  rgba(206,220,231,1) 0,rgba(89,106,114,1) 100%); /* Opera 11.10+ */
                background: -ms-linear-gradient(top,  rgba(206,220,231,1) 0,rgba(89,106,114,1) 100%); /* IE10+ */
                background: linear-gradient(to bottom,  rgba(206,220,231,1) 0,rgba(89,106,114,1) 100%); /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 ); /* IE6-8 */
                color: #fff;
                div, div:hover{
                    background:transparent;
                }
            }
                
        }
        
    }
    .checkout-confirm-block{
        margin-bottom: 20px;
    }
    body > .xdsoft_datetimepicker{
        display: none;
    }
}
@media @phone-strict {
}

@media @tablet-strict {
}
@media @non-desktop {
    .home-background {
        margin-top: 0;
    }
    .home-links {
        margin-top: 0;
        height: 30px;
    }

    .home-links .home-link .home-link-content {
        border-radius: 5px;
        .home-link-text tr {
            .font-size(14);
        }
        h3 {
            color: @text-color;
            .font-size(20);
            line-height: 30px;
            height: 30px;
        }
    }
    
    .carousel-pictures-wrapper {
        max-width: 450px;
        margin: auto;
    }
    .container-fluid .product-page-container, .container-fluid .search-container {
        margin: 0;
    }
    .search-filter{
        position:fixed;
        background:rgba(0,0,0,0.5);
        top: 0;
        left: 0;
        z-index: 10;
        height: 100%;
        overflow-y:auto;
        display: none;
    }
    .search-filter-toggle-bar{
        display: block;
    }
    .product-container-carousel.slick-slider{
        margin-left: 0;
        margin-right: 0;
    }
    .slick-prev, .slick-next {
        display: none!important;
    }
    .quick-view-modal{
        .modal-body .image {
            max-width: 350px;
            margin-left: auto;
            margin-right: auto;
        }
    }
}
@media @desktop {

}
@media @desktop-strict {
}
@media @large {
}

@media @tablet {
    .home-background {
        height: 450px;
        background: #fff;
        background-size: cover;
    }
    .home-slide .btn-danger {
        display: none;
    }
    .home-links{
        height: auto;
        margin-bottom: 0;
        background: none;
        .home-link {
            height: auto;
            margin-top: 20px;
            .home-link-content{
                height: auto;
                padding: 15px 0;
                h3{
                    text-align: left;
                    margin-left: 75px;
                }
                .home-link-text tr {
                    height: auto;
                }
                .home-link-icon{
                    padding-top: 0;
                }
            }
            
        }
    }
    .home-products {
        margin: 0;
    }
}